import React, { Component } from 'react'
import '@/assets/style/shopcart.scss'
export default class ShopCart extends Component {
  headList=["序号","名称","价格","数量","小计"]
  state={
    list:[
        {
            id:'1001',
            name:'欧莱雅女士面膜',
            price:10,
            num:1
        },
        {
            id:'1002',
            name:'兰蔻眼霜',
            price:8,
            num:1
        },
        {
            id:'1003',
            name:'自然堂水润精华',
            price:15,
            num:1
        }
    ]
  }

 //数量更新的方法
 changeNum=(op,id)=>{
    switch(op){
        case '+':
           const newList=this.state.list.map(item=>{
                if(id===item.id){
                    item.num++
                }
                return item
            })
            this.setState({
                list:newList
            })
            break;
        case '-':
            const newList1=this.state.list.map(item=>{
                if(id===item.id){
                    if(item.num>0){
                        item.num--
                    }else{
                        window.alert('数量不能小于0')
                    }
                }
                return item
            })
            this.setState({
                list:newList1
            })
            break;
        default:
            break;
    }
 }  
 /*
  *  使用ES6中get访问器来模拟vue的计算属性
     在类中一个方法的前面带上get关键字，那么在调用它的时候，就需要再带括号了
  */
 get totalPrice(){
    return `￥${this.state.list.reduce((prev,cur)=>prev+cur.price*cur.num,0)}元`
 }
  render() {
    const {list}=this.state
    return (
      <div>
        <h1>购物车</h1>
        <table>
            <thead>
                <tr>
                    {
                       this.headList.map((item,index)=><th key={index}>{item}</th>) 
                    }
                </tr>
            </thead>
            <tbody>
                {
                    list.map((item,index)=><tr key={index}>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.price}</td>
                        <td>
                            <button onClick={()=>{this.changeNum('-',item.id)}}>-</button>
                            <span>{item.num}</span>
                            <button onClick={()=>{this.changeNum('+',item.id)}}>+</button>
                        </td>
                        <td>{item.price*item.num}</td>
                    </tr>)
                }
            </tbody>
            <tfoot>
                <tr>
                    <td colSpan={5}>{this.totalPrice}</td>
                </tr>
            </tfoot>
        </table>
      </div>
    )
  }
}
